﻿@page "/forms/layout"
<Pager Title="Layout" Description="Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options."
Indicates="@(new[]{"Utilities","Form grid","Gutters","Horizontal form","Horizontal form label sizing"})">
	<Demo Title="">
		<Description>
			Margin utilities are the easiest way to add some structure to forms. 
			They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to <code>Margin.FromBottom</code> utilities, 
			and using a single direction throughout the form for consistency.
		</Description>
		<Run>
			<Form Model="this">
				<Element Margin="Margin.Is3.FromBottom">
					<FormInputText @bind-Value="UserName"/>
				</Element>
				<Element Margin="Margin.Is3.FromBottom">
					<FormInputPassword @bind-Value="Password"/>
				</Element>
				<Button Color="Color.Primary">Submit</Button>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""..."">
	<Element Margin=""Margin.Is3.FromBottom"">
		<FormInputText bind-Value=""UserName""/>
	</Element>
	<Element Margin=""Margin.Is3.FromBottom"">
		<FormInputPassword bind-Value=""Password""/>
	</Element>
	<Button Color=""Color.Primary"">Submit</Button>
</Form>
```
			")
		</Code>
	</Demo>
		<Demo Title="Form grid">
		<Description>
			More complex forms can be built using <code>Grid</code> layout . Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
		</Description>
		<Run>
			<Form Model="this">
				<Row>
					<Column>
						<FormInputText @bind-Value="UserName"/>
					</Column>
					<Column>
						<FormInputPassword @bind-Value="Password"/>
					</Column>
					<Column>
						<Button Color="Color.Primary">Submit</Button>
					</Column>
				</Row>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""..."">
	<Row>
		<Column>
			<FormInputText bind-Value=""UserName""/>
		</Column>
		<Column>
			<FormInputPassword bind-Value=""Password""/>
		</Column>
		<Column>
			<Button Color=""Color.Primary"">Submit</Button>
		</Column>
	</Row>
</Form>
```
			")
		</Code>
	</Demo>
		<Demo Title="Gutters">
		<Description>
			By adding <code>Gutter</code> parameter, you can have control over the gutter width in as well the inline as block direction. 
		</Description>
		<Run>
			<Form Model="complexForm">
				<Row CssClass="Css.Gutter(Num.Three3)">
						<Column Col="Col.Is4">
							<FormInputText @bind-Value="complexForm.FirstName"/>
						</Column>
						<Column Col="Col.Is4">
							<FormInputText @bind-Value="complexForm.LastName"/>
						</Column>					
						<Column Col="Col.Is4">
							<FormInputText @bind-Value="complexForm.UserName"/>
						</Column>			
						<Column Col="Col.Is8">
							<FormInputText @bind-Value="complexForm.Address"/>
						</Column>	
						<Column Col="Col.Is4">
							<FormSelect @bind-Value="complexForm.State">
								<option selected>Choose one state...</option>
								<option value="...">...</option>
							</FormSelect>
						</Column>
					</Row>
				</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""complexForm"">
	<Row CssClass=""Css.Gutter(Num.Three3)"">
		<Column Col=""Col.Is4"">
			<FormInputText bind-Value=""complexForm.FirstName""/>
		</Column>
		<Column Col=""Col.Is4"">
			<FormInputText bind-Value=""complexForm.LastName""/>
		</Column>					
		<Column Col=""Col.Is4"">
			<FormInputText bind-Value=""complexForm.UserName""/>
		</Column>			
		<Column Col=""Col.Is8"">
			<FormInputText bind-Value=""complexForm.Address""/>
		</Column>	
		<Column Col=""Col.Is4"">
			<FormSelect bind-Value=""complexForm.State"">
				<option selected>Choose one state...</option>
				<option value=""..."">...</option>
			</FormSelect>
		</Column>
	</Row>
</Form>
```
			")
		</Code>
	</Demo>
	<Demo Title="Horizontal form">
		<Description>
			Create horizontal forms with the grid by adding the <code>Row</code> component to form groups and using the <code>Column</code> component to specify the width of your labels and controls. Be sure to use <code>FormColumnLabel</code> component to your <code>Form</code> component as well so they’re vertically centered with their associated form controls.
		</Description>
		<Run>
			<Form Model="horizontalForm" AutoLabel="false">
				<Row Margin="Margin.Is3.FromBottom">
					<FormColumnLabel Col="Col.Is2" For="()=>horizontalForm.Email"/>
					<Column Col="Col.Is10">
						<FormInputText @bind-Value="horizontalForm.Email"/>
					</Column>
				</Row>
				<Row Margin="Margin.Is3.FromBottom">
					<FormColumnLabel Col="Col.Is2" For="()=>horizontalForm.Password"/>
					<Column Col="Col.Is10">
						<FormInputPassword @bind-Value="horizontalForm.Password"/>
					</Column>
				</Row>
				<Row Margin="Margin.Is3.FromBottom">
					<FormColumnLabel Col="Col.Is2" For="()=>horizontalForm.Radio">Radios</FormColumnLabel>
					<Column Col="Col.Is10">
						<FormInputRadioGroup @bind-Value="horizontalForm.Radio">
							<FormInputRadio Text="First radio" Value="1"/>
							<FormInputRadio Text="Second radio" Value="2"/>
							<FormInputRadio Text="Third radio" Value="3"/>
						</FormInputRadioGroup>
					</Column>
				</Row>
				<Row Margin="Margin.Is3.FromBottom">
					<Column Col="Col.Is10" Offset="Offset.Is2">
						<FormInputCheckbox @bind-Value="horizontalForm.Checked" AutoLabel/>
					</Column>
				</Row>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""horizontalForm"" AutoLabel=""false"">
	<Row Margin=""Margin.Is3.FromBottom"">
		<FormColumnLabel Col=""Col.Is2"" For=""()=>horizontalForm.Email""/>
		<Column Col=""Col.Is10"">
			<FormInputText @bind-Value=""horizontalForm.Email""/>
		</Column>
	</Row>
	<Row Margin=""Margin.Is3.FromBottom"">
		<FormColumnLabel Col=""Col.Is2"" For=""()=>horizontalForm.Password""/>
		<Column Col=""Col.Is10"">
			<FormInputPassword @bind-Value=""horizontalForm.Password""/>
		</Column>
	</Row>
	<Row Margin=""Margin.Is3.FromBottom"">
		<FormColumnLabel Col=""Col.Is2"" For=""()=>horizontalForm.Radio"">Radios</FormColumnLabel>
		<Column Col=""Col.Is10"">
			<FormInputRadioGroup @bind-Value=""horizontalForm.Radio"">
				<FormInputRadio Text=""First radio"" Value=""1""/>
				<FormInputRadio Text=""Second radio"" Value=""2""/>
				<FormInputRadio Text=""Third radio"" Value=""3""/>
			</FormInputRadioGroup>
		</Column>
	</Row>
	<Row Margin=""Margin.Is3.FromBottom"">
		<Column Col=""Col.Is10"" Offset=""Offset.Is2"">
			<FormInputCheckbox @bind-Value=""horizontalForm.Checked"" AutoLabel/>
		</Column>
	</Row>
</Form>
```
			")
		</Code>
	</Demo>
		<Demo Title="Horizontal form label sizing">
		<Description>

		</Description>
<Run>
			<Form Model="this" AutoLabel="false">
				<Row Margin="Margin.Is3.FromBottom">
					<FormColumnLabel Col="Col.Is2" For="()=>UserName" Size="Size.Small"/>
					<Column Col="Col.Is10">
						<FormInputText Size="Size.Small" @bind-Value="UserName" placeholder="Size.Small"/>
					</Column>
				</Row>
				<Row Margin="Margin.Is3.FromBottom">
					<FormColumnLabel Col="Col.Is2" For="()=>UserName"/>
					<Column Col="Col.Is10">
						<FormInputText @bind-Value="UserName" placeholder="Size default"/>
					</Column>
				</Row>
				<Row Margin="Margin.Is3.FromBottom">
					<FormColumnLabel Col="Col.Is2" For="()=>UserName" Size="Size.Large"/>
					<Column Col="Col.Is10">
						<FormInputText Size="Size.Large" @bind-Value="UserName" placeholder="Size.Large"/>
					</Column>
				</Row>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""..."" AutoLabel=""false"">
	<Row Margin=""Margin.Is3.FromBottom"">
		<FormColumnLabel Col=""Col.Is2"" For=""()=>UserName"" Size=""Size.Small""/>
		<Column Col=""Col.Is10"">
			<FormInputText Size=""Size.Small"" @bind-Value=""UserName"" placeholder=""Size.Small""/>
		</Column>
	</Row>
	<Row Margin=""Margin.Is3.FromBottom"">
		<FormColumnLabel Col=""Col.Is2"" For=""()=>UserName""/>
		<Column Col=""Col.Is10"">
			<FormInputText @bind-Value=""UserName"" placeholder=""Size default""/>
		</Column>
	</Row>
	<Row Margin=""Margin.Is3.FromBottom"">
		<FormColumnLabel Col=""Col.Is2"" For=""()=>UserName"" Size=""Size.Large""/>
		<Column Col=""Col.Is10"">
			<FormInputText Size=""Size.Large"" @bind-Value=""UserName"" placeholder=""Size.Large""/>
		</Column>
	</Row>
</Form>
```
			")
		</Code>
	</Demo>
</Pager>
@code{
	[Display(Name ="User Name")]
	public string UserName { get; set; }
	[Display(Name ="Password")]
	public string Password { get; set; }


	ComplexForm complexForm = new();
	class ComplexForm{

		[Display(Name ="User Name")]
		[Required(ErrorMessage ="{0} is required")]
		public string UserName { get; set; }

		[Display(Name ="Address")]
		[Required(ErrorMessage ="{0} is required")]
		public string Address { get; set; }	

		[Display(Name ="First Name")]
		[Required(ErrorMessage ="{0} is required")]
		public string FirstName { get; set; }	
		[Display(Name ="Last Name")]
		[Required(ErrorMessage ="{0} is required")]
		public string LastName { get; set; }	

		[Display(Name ="State")]
		[Required(ErrorMessage ="{0} is required")]
		public string State { get; set; }	
	}
	HorizontalForm horizontalForm = new();
	class HorizontalForm
	{
		[Display(Name ="Email")]
		public string Email { get; set; }

		[Display(Name ="Password")]
		public string Password { get; set; }

		public int Radio { get; set; }
		[Display(Name ="Example checkbox")]
		public bool Checked { get;  set; }
	}
}